<template>
<div id="wrapper">
  <nav-bar>
  </nav-bar>
  <main>
    <section class="hero is-primary">
      <div class="hero-body">
        <div class="container">
          <h1 class="title">
            {{ title }}
          </h1>
          <h2 class="subtitle">
            <router-link to="search" :disabled="status !== 'ready'">{{ subtitle }}</router-link>
          </h2>
        </div>
      </div>
    </section>
  </main>
</div>
</template>

<script>
import { DBReloader } from '@/mixins'
import NavBar from '@/components/NavBar'

export default {
  name: 'landing-page',
  mixins: [ DBReloader ],
  components: {
    NavBar
  },
  data: function () {
    return {
      counter: 3
    }
  },
  computed: {
    subtitle: function () {
      if (this.status === 'ready') {
        return 'Enter in (' + this.counter + ')s'
      } else {
        return ''
      }
    }
  },
  created: function () {
  },
  mounted: function () {
    this.reload()
      .then((count) => {
        this.countDown()
      })
  },
  methods: {
    goSearch () {
      this.$router.push('/search')
    },
    countDown () {
      this.counter = 3
      var timeInterval
      timeInterval = setInterval(() => {
        if (this.counter === 1) {
          this.counter = 0
          this.goSearch()
          return clearInterval(timeInterval)
        }
        this.counter -= 1
      }, 1000)
    }
  }
}
</script>

<style>
.subtitle {
    text-decoration: underline;
}
</style>
